<template>
	<view class="mhBox">
		<view class="example page" @touchmove.stop.prevent>
			<hr-pull-load @refresh='refresh' @loadMore='loadMore' :height='-1' :pullHeight='50' :maxHeight='100' :lowerThreshold='20'
			 :bottomTips='bottomTips' :isAllowPull="true" :isTab='false' ref='hrPullLoad'>
		<view class="top"></view>
		<view class="content">
			<view class="tablist flex-row flex-between">
				<view :class="{'selected':tabIndex==index}" v-for="(item,index) in tabList" :key='item.id' @click="tabSelected(index)">{{item.title}}</view>
				
			</view>
			<view class="listBox" v-if="tabIndex==0">
				<view class="list" @click="goZLDetail(item.id)" v-for="item in dataList" :key="item.id">
					<!-- v-if="item.isCertification" -->
					<view class="title flex-row">
						<view class="rzTag flex-row" v-if="item.isCertification">
							<image src="../../static/icon/yrz@2x.png"></image>
							<text>已认证</text>
						</view>
						<view>{{item.patentName}}</view>
					</view>
					<view class="tagList flex-row">
						<view v-for="(i,index) in getlaber(item.keywords) " :key="index+5">{{i}}</view>
					</view>
					<view class="classList" v-if="item.needApplyType">
						<view>{{item.needApplyType[0]}}</view>
						<view>{{item.needApplyType[1]}}</view>
						<view>{{item.needApplyType[2]}}</view>
						<view>{{item.needApplyType[3]}}</view>
					</view>
					<view class="desc text-ellipsis3">
						{{item.introduction}}
					</view>
				</view>
				
			</view>
			<view class="listBox" v-if="tabIndex==1">
					<view class="lists" @click="goDetail(item.userId)" v-for="item in dataList" :key="item.userId">
						<image :src="item.headImg" mode="aspectFill" class="avatar"></image>
						<view class="info">
							<view class="flex-row flex-between">
								<view class="flex-row">
									<text class="name">{{item.name}}</text>
									<view class="flex-row tag" v-if="item.userType">
										<image src="../../static/icon/tip@2x.png"></image>
										<text>{{getType(item.userType)}}</text>
									</view>
								</view>
				
								<image src="../../static/icon/yz@2x.png" class="tagImg"></image>
							</view>
							<view class="intro">{{item.userTypeName}}</view>
							<view class="desc text-ellipsis">{{item.introduce}}</view>
							<view class="has">
								已有
								<text>{{item.patentNumber}}</text>
								件专利
							</view>
						</view>
					</view>
					
			</view>
		</view>
		</hr-pull-load>
		</view>
	</view>
</template>

<script>
	import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';
	export default{
		data(){
			return{
				tabIndex:0,
				tabList:[
					{title:'觅获专利成果列表',isSelected:true,id:1},
					{title:'觅获用户列表',isSelected:false,id:2}
				],
				dataList:[],
				currentType:1,
				size:20,
				current:1,
				height: '',
				bottomTips: '',
				currentPage:1
			}
		},
		mounted() {
			this.getData(1)
		},
		onReachBottom(){  //上拉触底函数
		console.log('触底')
		         this.loadMore()
		    },
		methods:{
			//自定义上拉加载更多
			loadMore() {
				this.currentPage++;
				this.bottomTips = "loading";
				this.getData(2)
			},
			//自定义下拉刷新
			refresh() {
				this.currentPage = 1;
				this.getData(1)
			},
			tabSelected(index){
				this.tabIndex = index;
				if(index==0){
					this.currentType =1
				}else if(index==1){
					this.currentType =2
				}
				 this.getData(1)
			},
			getData(types){
				
				this.$http.get('/userCollect/getCollectList', {type:this.currentType,size:this.size,current:this.currentPage}).then(res => {
					if (res.code == '0') {
						// this.dataList = res.data.records;
						let data = res.data.records
						
						/* 拿到数据后的处理 */
						if(data.length>0){
							if(types==1){
								this.dataList = data
								console.log(this.dataList)
								this.bottomTips = "";
							}else if(types==2){
								this.dataList = this.dataList.concat(data);
								console.log(this.dataList.length)
								if(this.dataList.length<this.size){
									if(this.currentPage>1){
										
										this.bottomTips = "nomore";
										
									}
								}else{
									
									this.bottomTips = "more";
									
								}
							}
						}else{
							if(types==1){
								this.dataList = [];
								this.bottomTips = " ";
							}
							else if(types==2){
								this.dataList = this.dataList.concat(data);
								this.bottomTips = "nomore";
								this.currentPage--
							}
							
						}
						/* 这里300毫秒的延时，主要是为了优化视觉效果 */
						setTimeout(()=>{
							this.$refs.hrPullLoad.reSet();
						},300);
					}
				})
			},
			getlaber(item) {
				return item.split(',')
			},
			//专利详情
			goZLDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/index?id=' + id
				})
			},
			//专家详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/profess/detail?id=' + id
				});
			},
			getType(item){
				if(item == 1){
					return '普通用户'
				}else if(item == 2){
					return '行业专家'
				}else if(item == 3){
					return '合作高校'
				}else if(item == 4){
					return '合作单位'
				}else if(item == 5){
					return '合作院所'
				}else if(item == 6){
					return '合作伙伴'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.mhBox{
		.example{
			height: calc(100vh - 0upx);
			overflow: auto;
		}
		
		.top{
			height: 360upx;
			background: url(../../static/mymh.png) no-repeat left top;
			background-size: 100% 100%;
		}
		.content{
			.listBox{
				margin-top: 20upx;
				background: #fff;
				padding:0 30upx;
				margin-bottom: 20upx;
				.lists{
					padding:30upx 0 ;
					border-bottom: 1upx solid rgba(238,238,238,1);
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;
					.avatar{
						width:180upx;
						height:200upx;
						border-radius:8upx;
					}
					&:last-child{
						border-bottom: none;
					}
					.info{
						>view{
							margin-bottom: 17upx;
						}
						margin-left: 30upx;
						.name{
							font-size: 32upx;
							color: #22222A;
							font-weight: bold;
						}
						.intro{
							font-size: 26upx;
							color: #22222A;
						}
						.desc{
							font-size: 26upx;
							color: #666;
							width: 442upx;
						}
						.has{
							font-size: 26upx;
							color: #22222A;
							width: 100%;
							>text{
								color: #FD580A;
							}
						}
						.tag{
							background:#38D214;
							color: #fff;
							font-size: 22upx;
							align-items: center;
							// width:146upx;
							padding: 0 10upx 0 0;
							height:40upx;
							line-height: 40upx;
							border-radius: 18upx;
							margin-left: 20upx;
							>image{
								width: 40upx;
								height: 40upx;
								vertical-align: middle;
							}
						}
						.tagImg{
							width: 28upx;
							height: 30upx;
						}
					}
				}
				.list{
					padding:30upx 0 ;
					border-bottom: 1upx solid rgba(238,238,238,1);
					&:last-child{
						border-bottom: none;
					}
					.title{
						font-size: 32upx;
						color: #22222A;
						font-weight: bold;
						.rzTag {
							color: #fff;
							font-size: 24upx;
							background: #FD580A;
							width: 100upx;
							height: 38upx;
							padding: 0 6upx;
							line-height: 38upx;
							border-radius: 8upx;
							align-items: center;
							margin-right: 10upx;
						
							image {
								width: 26upx;
								height: 22upx;
						
								vertical-align: middle;
							}
						}	
						
					}
					.tagList{
						padding-top: 23upx;
						padding-bottom: 23upx;
						>view{
							font-size: 22upx;
							color: #FD580A;
							border:1upx solid #FD580A;
							padding: 5upx 10upx;
							margin-right: 16upx;
							border-radius: 8upx;
							
						}
					}
					.classList{
						color: #38D214;
						font-size: 26upx;
						// flex-wrap: wrap;
						>view{
							display: inline-flex;
							background: url(../../static/icon/green.png) no-repeat left 13upx;
							background-size: 8upx 8upx;
							padding-left: 20upx;
							margin-right: 37upx;
							padding-bottom: 20upx;
							&:first-child{
								margin-left: 0;
							}
						}
					}
					.desc{
						color: #666666;
						font-size: 28upx;
						
					}
				}
			}
			.tablist{
				position: sticky;
				top: 0;
				background: #f5f5f9;
				z-index: 1;
				padding: 0 64upx;
				>view{
					width: 50%;
					font-size: 32upx;
					padding: 40upx 0 20upx;
					text-align: center;
					color: #22222A;
					&.selected{
						color: #FD580A;
						background: url(../../static/icon/selected.png) no-repeat 50% bottom;
						background-size: 82upx 10upx;
					}
				}
			}
		}
	}
</style>
